<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>样式绑定：errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类</title>
    <script src="../../js/vue.js"></script>
</head>

<style>
  .text-danger {
    width: 100px;
    height: 100px;
    background: red;
  }
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<body>
  <div id="app05">
    <div v-bind:class="[errorClass,isActive ? activeClass : '']"></div>
  </div>

  <script>
    new Vue({
      el:'#app05',
      data:{
        isActive: true,
        activeClass:'active',
        errorClass:'text-danger'
      }
    });
  </script>
</body>
</html>
